<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>导航栏点击选中效果 | 纯HTML&CSS实现</title>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<header class="wrapper">
		<nav>

			<input type="radio" name="tab" id="home" checked>
			<input type="radio" name="tab" id="user">
			<input type="radio" name="tab" id="message">
			<input type="radio" name="tab" id="collect">
			<input type="radio" name="tab" id="create">
			<div class="tab"></div>
			<label for="home" class="home"><a href="#"><i class="fa fa-home"></i>首页</a></label>
			<label for="user" class="user"><a href="#"><i class="fa fa-user"></i>用户</a></label>
			<label for="message" class="message"><a href="#"><i class="fa fa-bell"></i>消息</a></label>
			<label for="collect" class="collect"><a href="#"><i class="fa fa-star"></i>收藏</a></label>
			<label for="create" class="create"><a href="#"><i class="fa fa-pencil"></i>创作</a></label>
		</nav>
	</header>
</body>

</html>